<template>
  <div class="content_box">
    <!-- 顶部背景图片 -->
    <div class="head_box">
      <!-- <swiper 
        class="swiper" 
        autoplay="true" 
        interval="3000" 
        duration="1000" 
      > -->
        <!-- <block v-for="(item, index) in storeMsg.storeImg" :index="index" :key="index"> -->
          <!-- <swiper-item> https://dyj-sx.oss-cn-beijing.aliyuncs.com/rich/20221224/zrpJ67hzPUnlRKvGSs6g.png-->
            <van-image
              width="100%"
              height="730rpx"
              fit="cover"
              widthFix
              lazy-load
              src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230116/WXGTafGfYHjvPGQtJABM.png"
            />
          <!-- </swiper-item> -->
        <!-- </block>
      </swiper> -->
    </div>

    <!-- 弹窗 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isOpen" @close="isOpen = false" >
        <div class="box">
          <div class="title">
            <p>开门</p>
            <p class="tb" @click="isOpen = false"><van-icon name="cross" /></p>
          </div> 
          <div class="list">
            <p class="name">大门门禁</p>
            <p class="icon" @click="openDoor(0,item.orderId)">
              <img src="/static/images/opendoor1.png" alt="">
              开门
            </p>
          </div>
          <div class="list" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
            <p class="name">{{item.roomName}}</p>
            <p class="icon" @click="openDoor(1,item.orderId)">
              <img src="/static/images/opendoor1.png" alt="">
              开门
            </p>
          </div>
          <!-- <p class="line"></p> -->
          <!-- <p class="quxiao" @click="isOpen = false">取消</p> -->
        </div>
      </van-popup>
    </div>

    <!-- 续单 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isXudan" @close="isXudan = false">
        <div class="box" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
          <div class="title">
            <p>续单</p>
            <p class="tb" @click="isXudan = false"><van-icon name="cross" /></p>
          </div>
          <div class="list">
            <p class="name">{{item.roomName}}</p>
            <p class="icon" @click="toXudan(item)">
              <img src="/static/images/wodedingdan.png" alt="">
              去续单
            </p>
          </div>
          <!-- <p class="line"></p>
          <p class="quxiao" @click="isXudan = false">取消</p> -->
        </div>
      </van-popup>
    </div>

    <!-- 提前入场 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isRuchang" @close="isRuchang = false">
        <div class="box" >
          <div class="title">
            <p>提前入场</p>
            <p class="tb" @click="isRuchang = false"><van-icon name="cross" /></p>
          </div>
          <div class="list" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
            <p class="name">{{item.roomName}}</p>
            <p class="icon" @click="toRuchang(item)">
              <img src="/static/images/tq.png" alt="">
              去提前
            </p>
          </div>
          <!-- <p class="line"></p>
          <p class="quxiao" @click="isRuchang = false">取消</p> -->
        </div>
      </van-popup>
    </div>

    <!-- 三个tab -->
    <div class="tab_box">
      <div class="box" @click="toNovice">
        <p class="img"><img src="/static/images/index_icon1.jpg" alt=""></p>
        <p>新手指南</p>
      </div>
      <div class="box" @click="toJifen(0)">
        <p class="img"><img src="/static/images/index_icon2.jpg" alt=""></p>
        <p>团购验券</p>
      </div>
      <div class="box" @click="toJifen(1)">
        <p class="img"><img src="/static/images/index_icon3.jpg" alt=""></p>
        <p>会员储值</p>
      </div>
    </div>

    <!-- 房间列表 -->
    <div class="list_box">
      <div class="title_box">
        <p class="name">场馆选择</p>
        <div class="line_box">
          <p class="line"></p>
          <p class="text">VENUE SELECTION</p>
          <p class="line"></p>
        </div>
      </div>
      <div @click="toRoom(item)" class="box" v-for="(item,index) in list" :key="index">
        <div class="img">
          <van-image
            width="100%"
            height="260rpx"
            fit="cover"
            lazy-load
            radius="10rpx"
            :src="item.roomImg && item.roomImg.length?item.roomImg[0]:''"
          />
        </div>
        <div class="msg">
          <div class="left">
            <p class="name">{{item.roomName}} ({{item.roomTypeName}})</p> 
            <div class="label_box">
              <p v-for="(child,i) in item.labelList" :key="i">{{child.labelName}}</p>
            </div>
          </div>
          <div class="right" v-if="item.status == 'free'">
            <img mode="widthFix" src="/static/images/room_status.png" alt="">
            空闲中
          </div>
          <div class="right on" v-else>
            <img mode="widthFix" src="/static/images/room_status1.png" alt="">
            使用中
          </div>
        </div>
        <div class="price_box">
          <div class="price">
            <p class="old">￥<span>{{item.price}}</span>/小时</p>
            <p class="new">现价￥{{item.price}}/小时</p>
          </div>
          <p class="jiantou"><img mode="widthFix" src="/static/images/jiantou.png" alt=""></p>
        </div>
      </div>
    </div>

    <!-- 右边浮动 -->
    <div class="right_flex">
      <div class="box" @click="seeUseOrder(0)">
        <img mode="widthFix" src="/static/images/index_open.png" alt="">
        <p class="text">开门</p>
      </div>
      <div class="box" @click="seeUseOrder(1)">
        <img mode="widthFix" src="/static/images/index_xudan.png" alt="">
        <p class="text">续单</p>
      </div>
      <div class="box" @click="seeUseOrder(2)">
        <img mode="widthFix" src="/static/images/index_rc.png" alt="">
        <p class="text">入场</p>
      </div>
    </div>

    <!-- 没有更多了 -->
    <p class="nodata">已经到底了</p>

    <!-- 用户协议 -->
    <div class="xieyi_pop">
      <van-popup :show="xieyiShow">
        <div class="box">
          <p class="bj"></p>
          <p class="name">用户协议和隐私政策</p>
          <p class="text">感谢您选择应许之地小程序!我们非常重视您的个人信息和隐私保护。</p>
          <p class="text">为了更好地保障您的个人权益，在您使用我们的产品前，请务必审慎阅读<span @click="toXieyi">《隐私政策》</span>和<span @click="toXieyi">《用户协议》</span>内的所有条款。</p>
          <p class="text">点击"同意并继续”的行为即表示您已阅读完毕并同意以上协议的全部内容。如您同意以上协议内容，请点击"同意并继续"开始使用我们的产品和服务！</p>
          <div class="anniu_box">
            <p class="qx" @click="xieyiShow = false">取消</p>
            <p class="ty" @click="tongyiXieyi">同意</p>
          </div>
        </div>
        <p class="close" @click="xieyiShow = false"><van-icon name="cross" /></p>
      </van-popup>
    </div>

    <!-- <ui-tab-bar :tabBarIndex="0"></ui-tab-bar> -->
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { 
  getStoreDetails,
  getRoomByStoreId,
  orderUnLock,
  entryJudge,
  getUserAgreement,
  addUserAgreement,
  getAllStore,
  unStoreLock
} from "@/api/index";
import { Debounce,minTime } from "@/utils"
export default {
  data(){
    return{
      storeMsg:{},
      isOpen:false,
      isXudan:false,
      list:[],
      openClick:false,
      xieyiShow:false,
      isRuchang:false,
      judgeList:[]
    }
  },
  
  methods: {

    // 用户是否同意弹窗
    getTc(){
      getUserAgreement().then(res=>{
        if(res.statusCode == '00000'){
          if(!res.data){
            this.xieyiShow = true
          }else{
            this.xieyiShow = false
          }
        }
      })
    },

    // 同意协议
    tongyiXieyi(){
      addUserAgreement().then(res=>{
        if(res.statusCode == '00000'){
          this.xieyiShow = false
        }
      })
    },

    // 跳转协议
    toXieyi(){
      wx.navigateTo({
        url: `/pages/xieyi/main?storeId=${this.storeMsg.storeId}`,
      });
    },

    // 右边操作
    seeUseOrder(num){
      this.$showLoading('加载中...')
      let title = ''
      let data = {
        storeId:this.storeMsg.storeId,
        orderType:num
      }
      getStoreDetails(data).then(res=>{
        if(res.statusCode == '00000'){
          this.storeMsg = res.data
          wx.hideLoading()
          if(res.data.underwayOrderList.length){
            if(!num){
              this.isOpen = true
            }
            if(num == 1){
              this.isXudan = true
            }
            if(num == 2){
              this.isRuchang = true
            }
            return
          }
          if(!num){
            title = '暂无订单，请先预约订单'
          }
          if(num == 1){
            title = '暂无续费订单，请先预约订单'
          }
          if(num == 2){
            title = '暂无提前入场订单，请先预约订单'
          }
          wx.showModal({
            title: '温馨提示',
            confirmText: "知道了",
            showCancel: false,
            content: title,
          })
        }else{
          wx.hideLoading()
        }
      })
    },

    // 获取房间列表
    async getRoomList(){
      this.$showLoading('加载中...')
      let storeId = ''
      await getAllStore().then(res=>{
        if(res.statusCode == '00000'){
          storeId = res.data[0].id
        }
      })
      await getStoreDetails({storeId}).then(res=>{
        if(res.statusCode == '00000'){
          storeId = res.data.storeId
          this.storeMsg = res.data
        }else{
          wx.hideLoading()
        }
      })
      if(storeId){
        await getRoomByStoreId({storeId}).then(res=>{
          if(res.statusCode == '00000'){
            this.list = res.data
            wx.hideLoading()
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh();
          }else{
            wx.hideLoading()
          }
        })
      }
    },

    // 开门
    openDoor:Debounce(function (num,id) {
      if(!this.openClick){
        this.openClick = true
        this.$showLoading('开门中...')
        let returnData = !num?unStoreLock({orderId:id}):orderUnLock({orderId:id})
        returnData.then(res=>{
          if(res.statusCode == '00000'){
            this.openClick = false
            wx.hideLoading()
            this.$toast('开门成功')
          }else{
            this.openClick = false
            wx.hideLoading()
            this.$toast(res.message)
          }
        })
      }
    },300),

    // 开门-弹窗
    openDoorClick(){
      if(this.storeMsg.underwayOrderList.length){
        this.isOpen = true
        return
      }
      wx.showModal({
        title: '温馨提示',
        confirmText: "知道了",
        showCancel: false,
        content: '你还没预约房间，请先预约房间',
      })
    },

    // 跳转续单
    toXudan(item){
      let timeLength = this.getHour(item.startTime,item.endTime)
      
      let info = {
        endTime:item.endTime,
        orderId:item.orderId,
        price:item.price,
        roomId:item.roomId,
        roomName:item.roomName,
        serviceTime:timeLength,
        startTime:item.startTime
      }
      console.log(info)
      info.endTime = info.endTime.replace(/-/g, '/')
      info.startTime = info.startTime.replace(/-/g, '/')
      wx.navigateTo({
        url: `/pages/renewalOrder/main?info=${JSON.stringify(info)}`,
      });
    },

    // 算选择多少小时
    getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return ms / 1000 / 60 / 60;  //小时
    },

    // 提前入场-弹窗
    // toAdvance(){
    //   entryJudge().then(res=>{
    //     if(res.statusCode == '00000'){
    //       if(res.data.length){
    //         this.judgeList = res.data
    //         this.isRuchang = true
    //         return
    //       }
    //       wx.showModal({
    //         title: '温馨提示',
    //         confirmText: "知道了",
    //         showCancel: false,
    //         content: '暂无需要提前入场订单',
    //       })
    //     }
    //   })
      // if(this.storeMsg.underwayOrderList.length){
      //   this.isRuchang = true
      //   return
      // }
      // wx.showModal({
      //   title: '温馨提示',
      //   confirmText: "知道了",
      //   showCancel: false,
      //   content: '你还没预约房间，请先预约房间',
      // })
      
    // },

    // 跳转提前入场
    toRuchang(item){
      let timeLength = this.getHour(item.startTime,item.endTime)
      let info = {
        endTime:item.endTime,
        orderId:item.orderId,
        price:item.price,
        roomId:item.roomId,
        roomName:item.roomName,
        serviceTime:timeLength,
        startTime:item.startTime
      }
      console.log(info)
      info.endTime = info.endTime.replace(/-/g, '/')
      info.startTime = info.startTime.replace(/-/g, '/')
      wx.navigateTo({
        url: `/pages/advance/main?info=${JSON.stringify(info)}`,
      });
    },

    // 续单-弹窗
    openXudanClick(){
      if(this.storeMsg.underwayOrderList.length){
        this.isXudan = true
        return
      }
      wx.showModal({
        title: '温馨提示',
        confirmText: "知道了",
        showCancel: false,
        content: '你还没预约房间，请先预约房间',
      })
    },

    // 跳转新手指南
    toNovice(){
      wx.navigateTo({
        url: `/pages/novice_guide/main`,
      });
    },

    // 跳转团购
    toJifen(num){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/recharge/main?active=${num}`,
      });
    },

    // 房间详情
    toRoom(item){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/room_xq/main?roomId=${item.id}`,
      });
    }
  },
  onShow() {
    if (wx.canIUse("getUpdateManager")) {
      console.log("进去版本检测------->");
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        if (res.hasUpdate) {
          //下载成功
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好，是否重启应用？",
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              },
            });
          });
          //下载失败
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
            });
          });
        } else {
          console.log("最新版本-------》");
        }
      });
    } else {
      wx.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getRoomList()
            }
          })
        }
      })
    }else{
      this.getRoomList()
    }
  },
  onLoad(options){
    this.getTc()
    
  },
  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
    // this.getRoomList()
  },
  onShareAppMessage() {
    return {
      title: '应许之地棋牌馆',
      path: `/pages/home/main`,
      imageUrl:'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230116/WXGTafGfYHjvPGQtJABM.png'
    }
 },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.getRoomList()
  },
  onUnload() {
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  padding-bottom: 50rpx;
  .head_box{
    .swiper{
      min-height: 730rpx;
    }
  }
  .pop_box{
    /deep/ .van-popup {
      border-top-right-radius: 20rpx !important;
      border-top-left-radius: 20rpx !important;
    }
    .box{
      .title{
        height: 104rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#323233;
        font-size:34rpx;
        border-bottom:1px solid #f0f0f0;
        position: relative;
        .tb{
          position: absolute;
          right:30rpx;
        }
      }
      .list{
        height: 104rpx;
        border-bottom:1px solid #f5f5f5;
        padding:0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:32rpx;
          color:#323233;
        }
        .icon{
          width: 196rpx;
          height: 70rpx;
          display:flex;
          align-items: center;
          justify-content: center;
          border:1px solid #222;
          color:#222;
          font-size:28rpx;
          font-weight: 500;
          border-radius: 50rpx;
        }
        img{
          width: 32rpx;
          height: 32rpx;
          margin-right:10rpx;
        }
      }
      .line{
        width: 100%;
        height: 16rpx;
        background: #f8f8f8;
      }
      .quxiao{
        height: 100rpx;
        line-height: 100rpx;
        font-size:32rpx;
        color:#323233;
        text-align: center;
      }
    }
  }
  .tab_box{
    width: 90%;
    height: 204rpx;
    margin:-75rpx auto 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139, 129, 114, 0.1);
    border-radius: 10rpx;
    position: relative;
    z-index: 10;
    .box{
      text-align: center;
      font-size:28rpx;
      color:#222;
      .img{
        img{
          width: 96rpx;
          height: 96rpx;
        }
      }
    }
  }
  .list_box{
    .title_box{
      text-align: center;
      margin-top:40rpx;
      .name{
        font-size:38rpx;
        color:#222;
        font-weight: bold;
        margin-bottom:2rpx;
      }
      .line_box{
        display: flex;
        align-items: center;
        justify-content: center;
        .line{
          width: 16rpx;
          height: 1px;
          background: #666666;
        }
        .text{
          color:#666666;
          font-size:22rpx;
          margin:0 20rpx;
        }
      }
    }
    .box{
      margin:30rpx 30rpx 40rpx 30rpx;
      background: #fff;
      padding:24rpx;
      box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139, 129, 114, 0.1);
      border-radius: 20rpx;
      .msg{
        display: flex;
        justify-content: space-between;
        margin:20rpx 0;
        .left{
          width: 70%;
          .name{
            font-weight: bold;
            color:#000;
            font-size:32rpx
          }
          .label_box{
            margin-top:12rpx;
            p{
              display: inline-block;
              margin-right:20rpx;
              font-size:24rpx;
              border:1px solid #788933;
              padding:2rpx 18rpx;
              border-radius: 4rpx;
              color:#788933;
              font-weight: bold;
              &:last-child{
                margin-right:0;
              }
            }
          }
        }
        .right{
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          font-size: 28rpx;
          color:#788933;
          right:30rpx;
          font-weight: bold;
          img{
            position: absolute;
            width: 130rpx;
          }
          &.on{
            color:#d47a39;
          }
        }
      }
      .price_box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top:30rpx;
        .price{
          display: flex;
          color:#000;
          font-size:26rpx;
          align-items: baseline;
          span{
            font-size:40rpx;
            font-weight: bold;
          }
          .new{
            margin-left:30rpx;
            color:rgb(92, 92, 92);
          }
        }
        .jiantou{
          color:#333;
          img{
            width: 100rpx;
          }
        }
      }
    }
  }
  .right_flex{
    position: fixed;
    bottom:64rpx;
    right:20rpx;
    z-index: 50;
    .box{
      width: 110rpx;
      height: 110rpx;
      background: #22201C;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction:column;
      color:#fff;
      font-size:22rpx;
      margin-bottom:32rpx;
      box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(132, 120, 91, 0.2);
      img{
        width: 38rpx;
      }
      &:nth-of-type(2){
        img{
          width: 44rpx;
        }
      }
      &:nth-of-type(3){
        img{
          width: 46rpx;
        }
      }
    }
  }
  .nodata{
    text-align: center;
    color:rgb(119, 118, 118);
    font-size:26rpx;
  }

  .xieyi_pop{
    /deep/ .van-popup {
      background: none;
      width: 80%;
      padding-bottom:100rpx;
    }
    .box{
      background: #fff;
      border-radius: 8rpx;
      position: relative;
      padding-bottom:24rpx;
      .bj{
        width: 100%;
        height: 300rpx;
        background-image: linear-gradient(#E4F5C1, #fff);
        position: absolute;
        top:0;
        border-radius: 8rpx;
      }
      .name{
        height:130rpx;
        line-height: 130rpx;
        position: relative;
        z-index: 10;
        text-align: center;
        font-size:36rpx;
        font-weight: 500;
        color:#191F25;
      }
      .text{
        position: relative;
        z-index: 10;
        width: 84%;
        margin:0 auto;
        font-size:28rpx;
        color:#7E8185;
        line-height: 42rpx;
        span{
          color:#383838;
          font-weight: 500;
        }
      }
      .anniu_box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin:0 30rpx;
        margin-top:34rpx;
        p{
          width: 46%;
          height: 96rpx;
          border:1px solid #222222;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size:30rpx;
        }
        .ty{
          background: #222222;
          color:#fff;
        }
      }
    }
    .close{
      width: 64rpx;
      height: 64rpx;
      border:4rpx solid #fff;
      border-radius: 50%;
      margin:42rpx auto 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:46rpx;
      color:#fff;
    }
  }
}
</style>